import React, { Component } from 'react'
// 引入swiper的css和js文件
import Swiper from '../assets/swiper/swiper'
import '../assets/swiper/swiper.css'
import '../assets/swiper/myswiper.scss'
import PTS from 'prop-types'
export default class PicScroll extends Component {
  //   props类型约束
  static propTypes = {
    id: PTS.string,
    speed: PTS.number,
    data: PTS.array.isRequired
  }
  //   props默认值
  static defaultProps = {
    id: 'swiper1',
    speed: 700
  }
  componentDidMount() {
    this.loadSwiper()
  }
  // 使用swiper库实现底部咖啡星讲堂
  loadSwiper = () => {
    const { speed, id } = this.props
    new Swiper(`#${id}`, {
      //   loop: true,
      //   autoplay: true,
      speed,
      slidesPerView: 1.5,
      spaceBetween: 20,
      // centeredSlides: true,
      watchSlidesProgress: true,
      // 上一页 下一页
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
      // 轮播图指示点
      // pagination: {
      //   el: '.swiper-pagination',
      //   clickable: true
      // }
    })
  }
  render() {
    const { data, id } = this.props
    return (
      <>
        <div className="swiper-container" id={id}>
          <div className="swiper-wrapper">
            {data.map((item) => (
              <div className="swiper-slide" key={item.id}>
                <div
                  style={{
                    height: 150,
                    background: `url(${item.pic})`,
                    backgroundSize: '100% 100%'
                  }}
                >
                  <span
                    style={{
                      position: 'absolute',
                      background: '#C2A661',
                      color: 'white',
                      fontSize: 16,
                      padding: 10,
                      top: 5,
                      left: 0
                    }}
                  >
                    {item.tag}
                  </span>
                </div>
                <div style={{ lineHeight: '40px', height: 40 }}>
                  {item.title}
                </div>
              </div>
            ))}
          </div>

          <div className="swiper-button-prev"></div>
          <div className="swiper-button-next"></div>
          <div className="swiper-pagination"></div>
        </div>
      </>
    )
  }
}
